<link rel="stylesheet" href="app/system/css/system.css"/>
<div class="panel panel-default search-panel">
    <div class="panel-body">
        <div class="pull-left">
            <form class="form-inline">
                <div class="form-group">
                    <label class="sr-only" for="query_name">名称</label>
                    <input type="text" ng-model="query_name" id="query_name" class="form-control" placeholder="名称" />
                </div>
                <button type="submit" class="btn btn-default" ng-click="query()">查找</button>
            </form>
        </div>
        <div class="pull-right">
            <button type="button" class="btn btn-primary" data-toggle="modal" ng-click="openEditDialog()">
                创建角色
                <span class="glyphicon glyphicon-plus-sign"></span>
            </button>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

<table class="table table-striped table-bordered table-hover">
    <tr>
        <th>名称</th>
        <th>操作</th>
    </tr>
    <tr ng-repeat="role in paged.list">
        <td>{{ role.name }}</td>
        <td>
            <button type="button" class="btn btn-primary" data-toggle="modal" ng-click="openEditDialog(role.id, role.name)">修改权限</button>
        </td>
    </tr>
</table>

<div ng-include="'app/common/view/paged.html'"></div>

<!-- edit dialog -->
<div class="modal fade" id="editDialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">创建角色</h4>
            </div>
            <div class="modal-body">
                <div id="editErrorMsg" class="alert alert-danger hide"></div>
                <form class="form-horizontal" role="form" id="editForm">
                    <div id="save_name_group" class="form-group">
                        <label for="save_name" class="col-sm-1 control-label">名称</label>
                        <div class="col-sm-11">
                            <input type="text" class="form-control" id="save_name" ng-model="save_name" ng-blur="validName(true)" placeholder="输入角色名称" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label">权限</label>
                        <div class="col-sm-11">
                            <ul class="list-group" ng-repeat="privilege in privileges">
                                <li class="list-group-item">
                                    <div>
                                        <label>
                                            <input type="checkbox" name="save_privileges" value="{{ privilege.id }}" ng-model="privilegeCheckedMap[privilege.id]" ng-click="togglePrivilegeChk(privilege.id)" class="privilege" /> <b>{{ privilege.name }}</b>
                                        </label>
                                    </div>
                                    <label ng-repeat="subPrivilege in privilege.children">
                                        <input type="checkbox" name="save_privileges" value="{{ subPrivilege.id }}" ng-model="privilegeCheckedMap[subPrivilege.id]" class="sub_privilege" /> {{ subPrivilege.name }}
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" ng-click="save()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>